<template>
	<div>
		<el-container>
			<el-header>图片水印参数</el-header>
			<el-main>
				<el-row :gutter="20">
					<el-col :span="2" :offset="2">
						<span>水印位置</span>
					</el-col>
					<el-col :span="4">
						<el-select v-model="imgmark.position" filterable placeholder="请选择">
							<el-option v-for="item in positions" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="2">
						<span>透明度</span>
					</el-col>
					<el-col :span="4">
						<el-input v-model="imgmark.alpha"></el-input>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
		<el-container>
			<el-header>图片处理</el-header>
			<el-main>
				<el-row>
					<el-col :span="2" :offset="2">
						<span>上传图片</span>
						<br>
						<p>仅可上传两张图片</p><p>第一张是待处理图片</p><p>第二张是水印图片</p>
					</el-col>
					<el-col :span="6">
						<el-upload action="#" list-type="picture-card" ref="imgupload" :limit="2" 
						:auto-upload="false" :file-list="fileList"
						:on-change="handleChange" 
						:on-remove="handleRemove"
						:on-preview="handlePictureCardPreview">
							<i class="el-icon-plus"></i>
						</el-upload>
					</el-col>
					<el-col :span="2">
						<el-button size="small" type="success" @click="uploadImgs" v-show="!buttonVisible">添加水印</el-button>
					</el-col>
					<el-col :span="2" :offset="2">
						<span>水印添加后效果</span>
						<br>
						<span v-show="buttonVisible">点击图片可放大</span>
					</el-col>
					<el-col :span="6">
						<div class="demo-image__preview">
							<el-image style="width: 200px;" :src="afterHandle" :preview-src-list="afterHandleList">
								<div slot="error" class="image-slot">
									<i class="el-icon-picture-outline"></i>
									<span>等待图片上传</span>
								</div>
							</el-image>
						</div>
					</el-col>
					<el-col :span="4">
						<el-button size="small" type="primary" @click="download" v-show="buttonVisible">下载图片</el-button>
						<el-button size="small" type="warning" @click="clearUploadedImage" v-show="buttonVisible">重置</el-button>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
	</div>
</template>

<script>
	import {TypeFile} from 'get-real-file-type';
	export default {
		name: "ImageMark",
		data: function() {
			return {
				positions: [],
				fileList: [],
				dialogImageUrl: '',
				dialogVisible: false,
				buttonVisible: false,
				afterHandle: '',
				afterHandleList: [],
				afterHandleName: '',
				imgmark: {
					position: '',
					alpha: 1.0
				}
			}
		},
		created: function() {
			this.getPositions();
		},
		methods: {
			getPositions() {
				let $this = this;
				$this.axios.get('/wmimg/positions').then(response => {
					let data = response.data;
					if (data.code == 1) {
						$this.$message.error(data.msg);
					} else {
						$this.positions = data.data;
					}
				});
			},
			uploadImgs() {
				if(this.fileList.length!=2){
					this.$message.warning("请上传两张图片");
					return;
				}
				let formdata = new FormData();
				let index = 0;
				let fileInputName = '';
				this.fileList.forEach(file => {
					let fileindexname = "file" + index;
					formdata.append(fileindexname, file.raw);
					fileInputName += fileindexname + ",";
					index++;
				});
				fileInputName = fileInputName.substring(0, fileInputName.length - 1);
				formdata.append("fileInputNames", fileInputName);
				formdata.append("pname", this.imgmark.position);
				formdata.append("alpha", this.imgmark.alpha);
				const loading = this.$loading({
					lock: true,
					text: '上传中……',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.axios.post("/upload/uploadimg",formdata).then(res=>{
					let data = res.data;
					this.$message.success(data.msg);
					this.afterHandle = "data:image/" + data.data.suffix + ";base64," + data.data.base64str;
					this.afterHandleName = data.data.imgname;
					this.afterHandleList = [this.afterHandle];
					this.buttonVisible = true;
					loading.close();
				}).catch(error=>{
					loading.close();
					this.$message.error(error.msg);
				});
			},
			handleChange(file,fileList) {
				this.fileList = fileList;
				let typeFile = new TypeFile(file);
				let $this = this;
				typeFile.onParseEnd = function(){
					if(this.isType(['image/jpeg','image/png','image/bmp','image/tiff'])){
						let isLt2M = file.size / 1024 / 1024 < 5;
						if (!isLt2M) {
							this.$message.error('上传图片大小不能超过 5MB!');
							return false;
						}
						return true;
					} else {
						$this.$message.error('上传图片只能是 JPG/PNG/BMP/TIF 格式!');
						return false;
					}
				};
				typeFile.onParseError = function() {
					$this.$message.error('上传图片无法解析!');
					return false;
				};
				typeFile.start();
			},
			handleRemove(file,fileList) {
				this.fileList = fileList;
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			download() {
				var alink = document.createElement("a");
				alink.href = this.afterHandle;
				alink.download = this.afterHandleName;
				alink.click();
			},
			clearUploadedImage(){
				this.$refs.imgupload.clearFiles();
				this.afterHandle = '';
				this.afterHandleList = [];
				this.imgmark.position = '';
				this.imgmark.alpha = 1.0;
				this.buttonVisible = false;
			}
		}
	}
</script>

<style scoped>
	.el-row {
		margin-bottom: 25px;
	}
</style>
